FEBOOK

Appearance

Return to top
On this page

实战篇 4-商品列表页开发及性能优化

商品列表页开发及性能优化

Taro 是一个高效的多端框架，在列表渲染时内部会对图片进行懒加载处理，对 diff 函数有做优化。本节会给大家分享一下如何使用 Taro 开发商品列表页及性能优化。

案例项目里的搜索列表页包含的组件有：搜索、筛选条件、搜索结果列表等。 这里主要讲搜索列表。

涉及的知识点如下：

  • 列表渲染
  • 数据请求 (Taro.request)
  • 分页的实现

实现的页面

从上图可以看出整个搜索列表页的结构，笔者分成了 6个组件：

  • 吸顶的搜索头部
  • 热搜
  • 历史搜索
  • 搜索条件
  • 商品列表展示
  • 搜索结果状态

从布局结构可以看出，整个搜索列表页的实现难度主要集中在数据拉取与展示、搜索条件选项的选择。

列表渲染

使用 Taro 渲染列表，类似于 JavaScript 中通过 map 将数组转化为一个数列相似，我们可以使用如下：

  const { list } = this.state
  const renderList = list.map((item, index) => {
    return (
      <View className='item' key={index}>{item.text}</View>
    )
  })
  return (  
    <View className='jingo_detail_content'>
      {renderList}
    </View>
  )

key 作为索引，它必须满足三个条件：稳定、可预测、唯一。 建议尽可能在使用 map 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

数据请求

Taro.request 用法和 wx.request 差不多，支持 promise 和跨域。 由于筛选条件和前面拆分的组件相对较多，并且组件之间的通信较为繁琐，所以用 Redux 作为数据状态管理工具。

import Taro from '@tarojs/taro'

Taro.request({
  url,
  data: {},
  header: {
    'content-type': 'application/json'
  }
})
  .then(res => console.log(res.data))

在进行数据搜索的时候，先进行 Dispatch（actionMap'requestSearch'），这样可以更新组件的状态，显示搜索结果，关闭热搜和历史搜索。

分页

本项目采用的是后端进行分页，前端通过滚动到底部触发回调函数去发起请求。然后将请求到的新数据加入 List 中。

滚动到底部触发的事件有两种方式：

  • ScrollView 中可以绑定 onReachBottom
  • Taro 中页面的 onReachBottom 事件，仅在小程序中支持。
 onReachBottom () {
    this.goSearchWords({page: searchResult.page + 1})
  }

可以设置 onReachBottomDistance 属性，距离底部稍远开始触发事件：

  config = {
    navigationBarTitleText: '搜索列表',
    onReachBottomDistance: 300,
  }

筛选条件选择

根据页面我们可以看出有很多筛选方式，笔者在 Redux 中提供了很多种状态，这样在处理每个流程就会很清晰，互不影响。

比如更新搜索结果如下:

  [RECEIVE_SEARCH_RESULT] (state, action) {
    return {
      ...state,
      searchResult: action.payload
    }
  }

解决列表页数据长度

刚开始所有商品平铺，拉接口分页展示，但这样展示下来会有一问题，就是随着数据量的增加会造成invokeWebviewMethod 数据传输长度为 1227297 已经超过最大长度 1048576。超出的数据将无法继续渲染的问题。为了解决这个问题，总结以下三个方案：

方案一： 去掉不必要的字段

这种方法其实很简单，就是对每个商品对应的参数进行处理，如本章开头的效果图所示，我们需要的内容就是：图片、商品名称、描述、商品 ID、价格，再看下接口返回的数据如下：

我们可以过滤参数，只取我们需要的。

总结: 这种方式如果数据库商品不多，是可以这样进行处理，但是当分页一直进行下去，总会超出数据的传输长度，所以还是未能从根本上解决这个问题。

方案二：二维数组

这种方法是在微信开发者论坛上找到的，解决方案的链接，这种方案测试还是可行的，测试加载了几十页都没问题。

方案三：大分页思想

大分页思想其实很简单，就是在下拉列表记录当前分页，达到 10页的时候，就以 10页为分割点，将当前 setState 的 List 取分割点后面的数据，判断滚动向前滚动就将前面数据 setState 进去，流程图如下：

按照上面的流程解决了数据分页问题，但是当页面往回滚动的时候，需要将 List 重新 setState，目前采用的是滚动距离顶部小于 500 时，就判定用户在进行上滚操作，List 取上一个大分页的数据。

结论

通过上述的方案，方案二其实最符合要求，方案三会有个切换数据卡顿的现象。

小结

本文从页面布局、数据拉取、列表筛选等方面阐述了如何使用 Taro 开发搜索列表页。主要是从原理，架构的角度去剖析一个列表页面的开发，并没有过于针对某些代码细节。一个是代码太长太多，全部贴出来解释也不现实；主要难点在于数据的无限加载。

在下一章节中我们将介绍商品详情页开发。